<template>
	<view>
		<!-- <statusbar></statusbar> -->
		<!-- <view class="header" :style="{paddingRight:paddingright==0?'32rpx':paddingright}">
			<view class="left">
				购物车<text style="font-size: 26rpx;font-weight: normal;">(3)</text>
			</view>
			<view class="right">
				<image class="del_icon" src="/static/img/shopcar/del.png" mode=""></image>
				<image class="sousuo_icon" src="/static/img/shopcar/sousuo.png" mode=""></image>
			</view>
		</view> -->
		<u-navbar>
			<view class="u-nav-slot left-slot" slot="left">
				购物车<text style="font-size: 26rpx;font-weight: normal;">({{totalnum}})</text>
			</view>
			<view class="u-nav-slot right-slot" slot="right" :style="{marginRight:paddingright}">
				<image class="del_icon" src="/static/img/shopcar/del.png" v-if="!isdel" mode="" @click="isdel=true">
				</image>
				<view class="" v-else @click="isdel=false">
					取消
				</view>
				<image class="sousuo_icon" @click="show1=true,focus=true" src="/static/img/shopcar/sousuo.png" mode=""></image>
			</view>
		</u-navbar>
		<scroll-view scroll-y="true" class="scrollview" :style="{marginTop:marginTop+'px',height:height}">
			<view class="content" v-if="carlist.length>0">
				<view class="dp_item" v-for="(caritem,carindex) in carlist" :key="carindex">
					<view class="item_top flex" @click="clicktodp(caritem.store.id)">
						<image class="dp_icon" src="/static/img/shopcar/shangj.png" mode=""></image>
						<view class="dp_name" v-if="caritem.store">
							{{caritem.store.name}}
						</view>
						<image class="more_icon" src="/static/img/shopcar/more.png" mode=""></image>
					</view>
					<view class="pro_list">
						<view class="pro_item flex" v-for="(item,index) in caritem.carList" :key="index">
							<view class="check_box" @click="clickcheck(carindex,index)">
								<image v-if="item.ischeck" class="check_icon" src="/static/img/shopcar/gou.png" mode="">
								</image>
							</view>
							<view class="pro_info flex"
								@click="clickto(`/pages/product/prodetail?id=${item.product_id}&type=no`)">
								<image style="width:196rpx;height:196rpx;border-radius: 20rpx;" :src="item.specimg" mode="">
									<!-- <view slot="error" style="font-size: 24rpx;">加载失败</view> -->
								</image>
								<view class=""
									style="height: 196rpx;display: flex;flex-direction: column;justify-content: space-between;flex: 1;margin-left: 22rpx;">
									<view class="pro_name">
										{{item.name}}
									</view>
									<view class="gg"
										@click.stop="clickgg(item.product_id,item.spec_id,item.id,item.num)">
										{{item.specname}}
										<image class="gg_more" src="/static/img/shopcar/more.png" mode=""></image>
									</view>
									<view class="pn">
										<view class="price">
											<text style="font-size: 24rpx;">￥</text>{{item.price}}
										</view>
										<u-number-box :min="1" :max="100" value="item.num">
											<view slot="minus" class="minus" @click="minus(carindex,index)">
												<image class="jian" src="/static/img/shopcar/jian.png" mode=""></image>
											</view>
											<text slot="input"
												style="width: 74rpx;text-align: center;font-size: 29rpx;color: #333;"
												class="input">{{item.num}}</text>
											<view slot="plus" class="plus" @click="plus(carindex,index)">
												<image class="jia" src="/static/img/shopcar/jia.png" mode=""></image>
											</view>
										</u-number-box>
									</view>
								</view>
							</view>

						</view>
					</view>
				</view>
			</view>
			<u-empty v-else mode="car" icon="http://cdn.uviewui.com/uview/empty/car.png"></u-empty>
		</scroll-view>
		<!-- 搜索弹框 -->
		<u-popup :show="show1" @close="show1=false,keyword='',searchlist=[]" bgColor='#f6f6f6' round='20rpx'>
			<view class="soupop">
				<view class="soupop_header">
					<u-search height="73rpx" bgColor='#fff' :showAction="true" actionText="搜索" @clear="keyword=''"
						@custom="search" @search='search' v-model='keyword' :animation="false" :focus='focus'></u-search>
					<image class="pop_cha_icon" src="/static/img/login/cha.png" mode=""
						@click="show1=false,keyword='',searchlist=[]"></image>
				</view>
				<scroll-view scroll-y="true" class="popsc">
					<view class="content" v-if="searchlist.length>0">
						<view class="dp_item" v-for="(caritem,carindex) in carlist" :key="carindex">
							<view class="item_top flex" @click="clicktodp(caritem.store.id)">
								<image class="dp_icon" src="/static/img/shopcar/shangj.png" mode=""></image>
								<view class="dp_name" v-if="caritem.store">
									{{caritem.store.name}}
								</view>
								<image class="more_icon" src="/static/img/shopcar/more.png" mode=""></image>
							</view>
							<view class="pro_list">
								<view class="pro_item flex" v-for="(item,index) in caritem.carList" :key="index">
									<view class="check_box" @click="clickcheck(carindex,index)">
										<image v-if="item.ischeck" class="check_icon" src="/static/img/shopcar/gou.png"
											mode="">
										</image>
									</view>
									<view class="pro_info flex"
										@click="clickto(`/pages/product/prodetail?id=${item.product_id}&type=no`)">
										<image style="width:196rpx;height:196rpx;border-radius: 20rpx;" :src="item.specimg"
											mode="">
											<!-- <view slot="error" style="font-size: 24rpx;">加载失败</view> -->
										</image>
										<view class=""
											style="height: 196rpx;display: flex;flex-direction: column;justify-content: space-between;flex: 1;margin-left: 22rpx;">
											<view class="pro_name">
												{{item.name}}
											</view>
											<view class="gg"
												@click.stop="clickgg(item.product_id,item.spec_id,item.id,item.num)">
												{{item.specname}}
												<image class="gg_more" src="/static/img/shopcar/more.png" mode="">
												</image>
											</view>
											<view class="pn">
												<view class="price">
													<text style="font-size: 24rpx;">￥</text>{{item.price}}
												</view>
												<u-number-box :min="1" :max="100" value="item.num">
													<view slot="minus" class="minus" @click="minus(carindex,index)">
														<image class="jian" src="/static/img/shopcar/jian.png" mode="">
														</image>
													</view>
													<text slot="input"
														style="width: 74rpx;text-align: center;font-size: 29rpx;color: #333;"
														class="input">{{item.num}}</text>
													<view slot="plus" class="plus" @click="plus(carindex,index)">
														<image class="jia" src="/static/img/shopcar/jia.png" mode="">
														</image>
													</view>
												</u-number-box>
											</view>
										</view>
									</view>

								</view>
							</view>
						</view>
					</view>
					<u-empty v-if="isempty" mode="car" icon="http://cdn.uviewui.com/uview/empty/car.png"></u-empty>
				</scroll-view>
				<view class="footer">
					<view class="flex">
						<view class="allnum">
							共{{allnum}}件
						</view>
						<view class="allprice flex">
							合计:<text style="font-size: 30rpx;color: #FF4E31;font-weight: bold;">￥</text><text
								style="font-size: 42rpx;color: #FF4E31;font-weight: bold;">{{allprice.toFixed(2)}}</text>
						</view>
					</view>
					<view class="btn" v-if="!isdel" @click="submit">
						立即购买
					</view>
					<view class="btn" v-else @click="del">
						确认删除
					</view>
				</view>
			</view>
		</u-popup>
		<!-- 弹框 -->
		<u-popup :show="show" round='30rpx' closeOnClickOverlay @close="show=false" overlayStyle='z-index:10075'>
			<view class="popbox" v-if="speclist.length>0">
				<image class="cha_icon" src="/static/img/login/cha.png" @click="show=false" mode=""></image>
				<view class="sptop">
					<image class="propic" radius='10rpx' :src="speclist[curgg].image"
						mode="">
						<!-- <view slot="error" style="font-size: 24rpx;">加载失败</view> -->
					</image>
					<view class="poptopright" style="margin-left: 23rpx;">
						<view class="popprice">
							<text style="font-size: 28rpx;">￥</text>{{speclist[curgg].price}}
						</view>
						<view class="popname">
							{{speclist[curgg].text}}
						</view>
					</view>
				</view>
				<view class="popgg">
					<view class="ggtitle">
						规格分类({{speclist.length}})
					</view>
					<scroll-view scroll-x="true" style="width: 689rpx;margin-bottom: 40rpx;">
						<view class="ggbox">
							<view class="ggitem" @click="curgg=index" :class="curgg==index?'active':''"
								v-for="(item,index) in speclist" :key="index">
								<image class="ggpic" :src="item.image" mode=""></image>
								<!-- <u--image class="ggpic" width='219rpx' height='208rpx' :src="item.image" mode="">
									<view slot="error" style="font-size: 24rpx;">加载失败</view>
								</u--image> -->
								<view class="ggname">
									{{item.text}}
								</view>
							</view>
						</view>
					</scroll-view>
				</view>
				<view class="popbtn"
					@click="submitspec({spec_id:speclist[curgg].id,id:carid,price:speclist[curgg].price})">
					确认
				</view>
			</view>
			<u-empty v-else mode="list"></u-empty>
		</u-popup>

		<view class="footer">
			<view class="flex">
				<view class="allnum">
					共{{allnum}}件
				</view>
				<view class="allprice flex">
					合计:<text style="font-size: 30rpx;color: #FF4E31;font-weight: bold;">￥</text><text
						style="font-size: 42rpx;color: #FF4E31;font-weight: bold;">{{allprice.toFixed(2)}}</text>
				</view>
			</view>
			<view class="btn" v-if="!isdel" @click="submit">
				立即购买
			</view>
			<view class="btn" v-else @click="del">
				确认删除
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getourCar
	} from '@/api/my.js'
	import {
		getSpec,
		getgoodsSpec,
		deletecar,
		updatecar
	} from '@/api/product.js'
	let menuButtonInfo = uni.getMenuButtonBoundingClientRect()
	export default {
		data() {
			return {
				focus:false,
				show1: false,
				paddingright: 0,
				carlist: [],
				marginTop: 0,
				height: '',
				allprice: 0,
				allnum: 0,
				isdel: false,
				totalnum: 0,
				checkarr: [],
				show: false,
				speclist: [],
				curgg: null,
				carid: null, //购物车id
				curnum: null,
				keyword: '',
				searchlist: [],
				isempty:false
			}
		},
		methods: {
			getCarlist() {
				this.allnum = 0
				this.allprice = 0
				this.checkarr = []
				this.totalnum = 0
				getourCar().then(res => {
					this.carlist = res.data.data
					this.carlist.map(i => {
						this.totalnum += i.carList.length
						i.carList.map(t => {
							t.pic = this.$BASE_URL + t.images.split(',')[0]
							if (t.ischeck) {
								this.allnum += Number(t.num)
								this.allprice += (Number(t.price) * Number(t.num))
								this.checkarr.push(t)
							}
							getSpec({
								id: t.spec_id
							}).then(spec => {
								this.$set(t, 'specname', spec.data.data.text)
								this.$set(t, 'specimg', spec.data.data.image)
							})
						})
					})
				})
			},
			clicktodp(user_id) {
				this.$u.route('/pages/product/smart', {
					user_id
				})
			},
			clickto(url) {
				uni.navigateTo({
					url
				})
			},
			// 搜索
			search() {
				// console.log(this.keyword)
				if(!this.keyword){
					uni.showToast({
						title:'请输入宝贝关键词',
						icon:'none'
					})
					return
				}
				getourCar({
					keyword: this.keyword
				}).then(res => {
					this.searchlist = res.data.data
					if(this.searchlist.length==0){
						this.isempty=true
					}else{
						this.isempty=false
					}
				})
			},
			// 减少数量
			minus(carindex, index) {
				if (this.carlist[carindex].carList[index].num > 1) {
					this.carlist[carindex].carList[index].num--
					this.carid = this.carlist[carindex].carList[index].id
					this.edit({
						num: this.carlist[carindex].carList[index].num,
						id: this.carid,
					})
					if (this.carid = this.carlist[carindex].carList[index].ischeck) { //选中
						this.allnum--
						this.allprice -= Number(this.carlist[carindex].carList[index].price)
					}
				} else {
					uni.showToast({
						title: '宝贝数量不能再减少了',
						icon: 'none'
					})
				}
			},
			// 加数量
			plus(carindex, index) {
				this.carlist[carindex].carList[index].num++
				this.carid = this.carlist[carindex].carList[index].id
				this.edit({
					num: this.carlist[carindex].carList[index].num,
					id: this.carid,
				})
				// this.allnum++
				// 判断是否为选择状态
				if (this.carid = this.carlist[carindex].carList[index].ischeck) { //选中
					this.allnum++
					this.allprice += Number(this.carlist[carindex].carList[index].price)
				}
			},
			// 选择规格
			submitspec(obj) {
				// this.edit(obj)
				updatecar({
					id: obj.id,
					obj: {
						data: {
							price: obj.price,
							spec_id: obj.spec_id,
						}
					}
				}).then(res => {
					if (res.data.code == 1) {
						this.getCarlist()
						this.show = false
					}
				})
			},
			clickcheck(carindex, index) {
				if (this.carlist[carindex].carList[index].ischeck) {
					this.carlist[carindex].carList[index].ischeck = false
					this.checkarr.map((t, i) => {
						if (t.id == this.carlist[carindex].carList[index].id) {
							this.checkarr.splice(i, 1)
						}
					})
					this.edit({
						ischeck: 0,
						id: this.carlist[carindex].carList[index].id,
					})
					this.allnum -= this.carlist[carindex].carList[index].num
					this.allprice -= this.carlist[carindex].carList[index].num * this.carlist[carindex].carList[index]
						.price
				} else {
					this.carlist[carindex].carList[index].ischeck = true
					this.edit({
						ischeck: 1,
						id: this.carlist[carindex].carList[index].id,
					})
					this.checkarr.push(this.carlist[carindex].carList[index])
					this.allnum += this.carlist[carindex].carList[index].num
					this.allprice += this.carlist[carindex].carList[index].num * this.carlist[carindex].carList[index]
						.price
				}
			},
			// 获取商品规格
			clickgg(id, spec_id, carid, num) {
				this.carid = carid
				this.curnum = num
				getgoodsSpec({
					goods_id: id
				}).then(res => {
					// console.log(res)
					if (res.data.code == 1) {
						this.speclist = res.data.data
						this.speclist.map((t, i) => {
							if (t.id == spec_id) {
								this.curgg = i
							}
						})
						this.show = true
					}
				})
			},
			// 修改购物车
			edit(obj) {
				this.show = false
				let {
					price,
					num,
					spec_id,
					ischeck
				} = obj
				updatecar({
					id: obj.id,
					obj: {
						data: {
							price,
							num,
							spec_id,
							ischeck
						}
					}
				}).then(res => {
					if (res.data.code == 1) {

					}
				})
			},
			del() { //删除宝贝
				// console.log(this.checkarr)
				if (this.checkarr.length == 0) {
					uni.showToast({
						title: '你还没有选择宝贝哦',
						icon: 'none'
					})
					return
				}
				let id = ''
				let idarr = []
				let _this = this
				this.checkarr.map(t => {
					idarr.push(t.id)
				})
				id = idarr.join(',')
				// console.log(id)
				uni.showModal({
					title: `确认将这${this.checkarr.length}个宝贝删除？`,
					confirmText: '删除',
					cancelText: '我再想想',
					success(res) {
						if (res.confirm) {
							console.log('用户点击确定');
							deletecar({
								id
							}).then(res1 => {
								if (res1.data.code == 1) {
									_this.getCarlist()
								}
							})
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				})
			},
			submit() {
				if (this.checkarr.length == 0) {
					uni.showToast({
						title: '你还没有选择宝贝哦',
						icon: 'none'
					})
					return
				}
				// console.log(this.checkarr)
				this.$store.commit('setcheckcarlist',this.checkarr)
				uni.navigateTo({
					url:'/pages/order/carordersure'
				})
			}
		},
		onLoad() {
			this.height = 'calc(100vh - 44px - 116rpx - 125rpx)';
			// #ifdef MP
			this.paddingright = `calc(750rpx - ${menuButtonInfo.left}px + 32rpx)`
			// console.log(this.paddingright)
			this.height = `calc(100vh - ${44 + uni.getStorageSync('statusBarHeight')}px - 116rpx)`
			// #endif
			this.marginTop = 44 + uni.getStorageSync('statusBarHeight')

		},
		onShow() {
			// this.totalnum = 0
			this.getCarlist()
		}
	}
</script>

<style lang="less">
	page {
		background-color: #F7F7F9;
	}

	// .header {
	// 	// height: 158rpx;
	// 	background-color: #fff;
	// 	padding: 0 39rpx 0 30rpx;
	// 	height: 125rpx;
	// 	display: flex;
	// 	justify-content: space-between;
	// 	align-items: center;

	// 	.left {
	// 		color: #333333;
	// 		font-size: 36rpx;
	// 		font-weight: bold;
	// 		display: flex;
	// 		align-items: flex-end;
	// 	}

	// 	.right {
	// 		display: flex;
	// 		align-items: center;

	// 		.del_icon {
	// 			width: 39rpx;
	// 			height: 39rpx;
	// 		}

	// 		.sousuo_icon {
	// 			width: 43rpx;
	// 			height: 46rpx;
	// 			margin-left: 35rpx;
	// 		}
	// 	}
	// }

	.content {
		padding: 20rpx 24rpx;
	}

	.dp_item {
		background: #FFFFFF;
		border-radius: 26rpx;
		padding: 35rpx 20rpx 0;

		.item_top {
			align-items: center;

			.dp_icon {
				width: 28rpx;
				height: 26rpx;
			}

			.dp_name {
				font-size: 24.47rpx;
				color: #616161;
				margin: 0 10rpx;
			}

			.more_icon {
				width: 12rpx;
				height: 24rpx;
			}
		}

		.pro_list {

			margin-bottom: 25rpx;

			.pro_item {
				.check_box {
					width: 30rpx;
					height: 30rpx;
					border: 4rpx solid #CBCBCB;
					border-radius: 50%;
					position: relative;
					margin-right: 17rpx;

					.check_icon {
						width: 36rpx;
						height: 36rpx;
						position: absolute;
						// border-radius: 50%;
						top: -4rpx;
						left: -4rpx;
					}
				}

				.pro_info {
					flex: 1;
					padding: 28rpx 0;
					border-bottom: 2rpx #F5F4F4 solid;

					.pro_pic {
						width: 196rpx;
						height: 196rpx;
						border-radius: 20rpx;
						margin: 0 22rpx 0 17rpx;
					}

					.pro_name {
						font-size: 30rpx;
						color: #333333;
					}

					.gg {
						// width: 399rpx;
						padding: 0 17rpx;
						line-height: 55rpx;
						background: #F7F6F6;
						border-radius: 10rpx;
						display: flex;
						align-items: center;
						justify-content: space-between;
						color: #9C9C9C;
						font-size: 24rpx;

						.gg_more {
							width: 15rpx;
							height: 21rpx;
						}
					}

					.pn {
						display: flex;
						justify-content: space-between;

						.price {
							color: #FF4E31;
							font-size: 35rpx;
							font-weight: bold;
							margin-right: 40rpx;
						}
					}
				}
			}
		}
	}

	.minus {
		width: 51rpx;
		height: 46rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		border-right: 1rpx solid #DFDFDF;

		.jian {
			width: 14rpx;
			height: 2rpx;
		}
	}

	.plus {
		width: 51rpx;
		height: 46rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		border-left: 1rpx solid #DFDFDF;

		.jia {
			width: 16rpx;
			height: 16rpx;
		}
	}

	.flex {
		display: flex;
		align-items: center;
	}

	.u-number-box {
		border-radius: 10rpx;

		border: 1rpx solid #DFDFDF;
	}

	.footer {
		// width: 750rpx;
		height: 114rpx;
		background-color: #fff;
		border-bottom: 2rpx solid #F7F7F9;
		margin-bottom: 126rpx;
		/* #ifdef MP */
		margin-bottom: 0;
		/* #endif */
		display: flex;
		align-items: center;
		padding: 0 26rpx 0 36rpx;
		justify-content: space-between;

		.allnum {
			color: #979797;
			font-size: 25.01rpx;
			line-height: 114rpx;
			margin-right: 28rpx;
		}

		.allprice {
			color: #333333;
			line-height: 114rpx;
			font-size: 29rpx;
		}

		.btn {
			width: 234rpx;
			line-height: 80rpx;
			background: linear-gradient(90deg, #FF8717, #FF5F00);
			border-radius: 40rpx;
			text-align: center;
			font-size: 30rpx;
			font-weight: bold;
			color: #fff;
		}
	}

	.scrollview {}

	.u-nav-slot {
		display: flex;
	}

	.left-slot {
		color: #333333;
		font-size: 36rpx;
		font-weight: bold;
		display: flex;
		align-items: flex-end;
	}

	.right-slot {
		display: flex;
		align-items: center;

		.del_icon {
			width: 39rpx;
			height: 39rpx;
		}

		.sousuo_icon {
			width: 43rpx;
			height: 46rpx;
			margin-left: 35rpx;
		}
	}

	.popbox {
		padding: 47rpx 34rpx 40rpx 25rpx;
		position: relative;

		.cha_icon {
			position: absolute;
			width: 20rpx;
			height: 20rpx;
			top: 48rpx;
			right: 34rpx;
		}

		.sptop {
			display: flex;
			align-items: center;
			margin-bottom: 76rpx;

			.propic {
				width: 115rpx;
				height: 115rpx;
				border-radius: 10rpx;
			}

			.popprice {
				color: #FF4E31;
				font-size: 42rpx;
				font-weight: bold;
			}

			.popname {
				color: #333;
				font-size: 30rpx;
				margin-top: 20rpx;
			}
		}

		.ggtitle {
			color: #000000;
			font-size: 30rpx;
			margin-bottom: 22rpx;
		}

		.ggbox {
			display: flex;
			align-items: center;

			.ggitem {
				border-radius: 10rpx;
				// border: 1rpx solid #FF4E31;
				margin-right: 15rpx;
				overflow: hidden;

				.ggpic {
					width: 219rpx;
					height: 208rpx;
				}

				.ggname {
					background-color: #F5F5F5;
					line-height: 56rpx;
					text-align: center;
					font-size: 22rpx;
					color: #333;
					margin-top: -3px;
					border-radius: 0px 0px 10rpx 10rpx;
				}
			}

			.active {

				border: 2rpx solid #FF4E31;
			}
		}

		.popbtn {
			width: 687rpx;
			line-height: 114rpx;
			background: linear-gradient(153deg, #FF8717, #FF5F00);
			border-radius: 57rpx;
			font-size: 36rpx;
			color: #fff;
			text-align: center;
		}

		.numbox {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-bottom: 55rpx;
			padding-left: 4rpx;
			margin-top: 80rpx;

			.numleft {
				font-size: 30rpx;
				color: #333;
				font-weight: bold;
			}

			.minus {
				width: 51rpx;
				height: 52rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				border-right: 1rpx solid #DFDFDF;

				.jian {
					width: 14rpx;
					height: 2rpx;
				}
			}

			.plus {
				width: 51rpx;
				height: 52rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				border-left: 1rpx solid #DFDFDF;

				.jia {
					width: 16rpx;
					height: 16rpx;
				}
			}

			.u-number-box {
				border-radius: 10rpx;

				border: 1rpx solid #DFDFDF;
			}
		}
	}

	.u-empty {
		padding: 50rpx 0;
	}

	.soupop {
		height: calc(100vh - 44px - 73rpx - 40rpx);

		.soupop_header {
			padding: 30rpx;
			display: flex;
			align-items: center;

			.pop_cha_icon {
				width: 30rpx;
				height: 30rpx;
				margin-left: 40rpx;
			}
		}

		.popsc {
			height: calc(calc(100vh - 44px - 73rpx - 40rpx) - 60rpx - 114rpx - 73rpx);
		}
	}
</style>
